<template>
	<view style="margin-bottom: 70rpx;background-color: #f2f2f2;min-height: 100vh;">
		<!-- <view style="display:flex;padding:30rpx 20rpx;background:#fff;position:relative;" >
			<view style="position:absolute;left:0;top:0;width:100%;height:100%;z-index: 99;" @click="openStatus()"></view>
			<u-search :disabled="true" placeholder="选择类型"  :showAction="false"></u-search>
		</view> -->
		<wly-tabnav ref="tabnav" lineStyle="background:#0070f3;" :fixed="false" :tabnav="tabnav" @ontype_='ontype'></wly-tabnav>
		<view class="item" style="margin: 30rpx 20rpx 20rpx 20rpx;padding:30rpx 0;"  v-for="notice in noticeList"  :key="notice.log_id" @click="baojinDetail(notice.id,notice.source,notice.status,notice.create_time,notice.r_id,notice.log_id)">
			<view class="" style="width:70%;display: flex;justify-content: space-between;flex-direction: column;margin-left: 20rpx;">
				<view class="baojin-info">{{notice.content}}</view>
				<view class="baojin-time">通知时间:{{getTimeFormat(notice.create_time)}}</view>
				
			</view>
			<view class=""
				style="display: flex;justify-content: space-between;width:30%;flex-direction: column;align-items: center;">
				<view class="read-btn" v-if="notice.read_status==1">已读</view>
				<view class="read-btn2" v-else>未读</view>
				<view v-if="notice.status==1" class="finish-btn" @click.stop="">
					<text class="btn-text">已完成</text>
				</view>
				<view v-else-if="notice.status==0" class="d-btn" @click.stop="noticeStatus(notice)">
					<text class="btn-text">待处理</text>
				</view>
				<view v-else class="y-btn" @click.stop="">
					<text class="btn-text">已过期</text>
				</view>
			</view>
			
		
		</view>
		<!-- 底部导航栏 -->
		<tb />
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel" keyName="label"></u-picker>
	</view>
</template>

<script>
	import tb from '../../uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue'
	export default {
		components: {
			tb
		},
		data() {
			return {
				noticeList:[],
				page:1,
				row:10,
				handleNotice:{
					id:'',
					status:'',
					source:'',
					describe:'',
					imgs:[]
				},
				show: false,
                columns:[
                    [{
                        label: '全部',
                        // 其他属性值
                        id: 'all'
                        // ...
                    }, {
                        label: '处理中',
                        id: '0'
                    },{
                        label: '已完成',
                        // 其他属性值
                        id: '1'
                        // ...
                    }, {
                        label: '未完成',
                        id: '2'
                    }]
                ],
				status:'all',
				tabnav:[{
                    type: 'all', //状态值
                    name: '全部',
                    list: [], //数据
                }, {
                    type: '0', //状态值
                    name: '处理中',
                    list: [], //数据
                }, {
                    type: '1', //状态值
                    name: '已完成',
                    list: [], //数据
                }, {
                    type: '2', //状态值
                    name: '未完成',
                    list: [], //数据
                }]
			};
		},
		onShareAppMessage() {
			return {
				title: '分享给微信好友',
				path: '/pages/index/index'
			};
		},
		onLoad(options) {
			
		},
		onShow(){
			this.initBaojinList()
		},
		computed:{
			getTimeFormat(){
				return (time) => {
					return this.$u.timeFormat(time,'yyyy-mm-dd')
				}
			}
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		/**
		 * 触底加载更多
		 */
		onReachBottom() {
			this.getIndexList() // 加载更多数据
		},
		methods:{
			ontype(e){
				console.log({e});
				this.status = e.type
				this.initBaojinList()
			},
			cancel(){
				this.show = false
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
                console.log('confirm', e)
				this.status = e.value[0]['id']
				this.initBaojinList()
                this.show = false
			},
			openStatus(){
				console.log(999);
				this.show = true
			},
			baojinDetail(id,source,status,time,r_id,log_id){
				time = this.getTimeFormat(time)
				uni.navigateTo({
					url:`/pages/task/detail?id=${id}&source=${source}&status=${status}&time=${time}&r_id=${r_id}&notice_type=1&log_id=${log_id}`
				})
			},
			// 初始化报警列表
			initBaojinList(){
				this.page = 1
				this.row = 10
				this.noticeList = [];
				this.getIndexList()
			},
			getIndexList() {
				this.isLoading = true
				this.$api.common.getNoticeList({page:this.page,rows:this.row, notice_type: '1',status:this.status}).then(res => {
					if(res.code == 1){
						this.noticeList = this.noticeList.concat(res.data.list)
						if(res.data.list.length == 0){
							this.loadTitle = '没有更多了'
							this.$u.toast('没有更多了');
						}else{
							this.page += 1
						}
						this.isLoading = false
					}
					
				})
			},
			noticeStatus(notice){
				
				if(notice.status == 1){
					return this.$u.toast('已处理')
				}else if(notice.status == 2){
					return this.$u.toast('已过期，后台处理')
				}
				
				this.handleNotice.id = notice.r_id
				this.handleNotice.source = notice.source
				this.handleNotice.status = '1'
				
				this.handleNoticeSumbit()
			},
			// 处理通知接口
			handleNoticeSumbit() {
				let handleNotice = JSON.parse(JSON.stringify(this.handleNotice))
				if(!handleNotice.id || !handleNotice.status || !handleNotice.source){
					return this.$u.toast('通知id或状态或来源不能为空')
				}
				handleNotice.imgs = handleNotice.imgs.join(',')
				this.$api.common.handleNotice(handleNotice).then(res => {
					if(res.code == 1){
						this.$u.toast('操作成功')
						
						setTimeout(() => {
							this.initBaojinList()
						},500)
						
					}
				})
			},
		}
	}
</script>

<style scoped>
page{
	background-color: #f2f2f2;
}
.baojin-info {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 40rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.9;
		width: 80%;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}
.baojin-f {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
	}
	.num {
		color: #0c2f5b;
		text-align: center;
		font-family: "Alimama FangYuanTi VF";
		font-size: 35rpx;
		font-style: normal;
		font-weight: Bold-Round;
		line-height: normal;
	}
	.num-text {
		color: #516b8c;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 15rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 10rpx;
	}
	.item{
		height: 100rpx;
		flex-shrink: 0;
		border-radius: 16rpx;
		border: 1rpx solid #FFF;
		display: flex;
		background: #ffffff;
	}
	.baojin-time {
		color: #546d8c;
		font-family: "PingFang SC";
		/* font-size: 15rpx; */
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.finish-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
	}
	.read-btn{
		width: 120rpx;
		height: 37rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #E33D1F 0%, #F87D51 100%);
		text-align: center;
		line-height: 35rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 25rpx;
		font-style: normal;
		font-weight: 500;
	}
	.read-btn2{
		width: 120rpx;
		height: 32rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #8E9BAB 0%, #A1B9C9 100%);
		text-align: center;
		line-height: 30rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 25rpx;
		font-style: normal;
		font-weight: 500;
	}
	.d-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #FCA624 0%, #FFA24B 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
	}
	.y-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
		background: linear-gradient(80deg, #CCC 0%, #BABABA 100%);
	}
</style>
